<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以便使您的页面更好的在移动平台上展示-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>Hello Map</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!--设置容器样式大小，使地图充满整个浏览器窗口-->
    <style type="text/css">
       /* html{height:100%}
        body{height:100%;margin:0px;padding:0px}*/
       /* #container{height:100%}*/

       body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
       #l-map{height:700px;width:100%;}
       #r-result{width:100%; height:0%; font-size:14px;line-height:20px;}
       #l-map-1{height:300px;width:100%;}
       #r-result-1{width:100%;}
       /*上移图层*/
       .tangram-suggestion{
           z-index:9999;
       }
    </style>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <!--引用百度地图API文件！！！-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SmHmywutT146wyRzXMhgajrCG5MxIpo0"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
    <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" id="bdGEO" onclick="bdGEO()">
                <el-tab-pane :span="12" label="分布图" name="first">
                    <div id="l-map">
                        <!---->
                        <div id="result" ></div>
                    </div>
                    <!--<div id="r-result">
                        &lt;!&ndash;<input type="button" value="批量地址解析"  />&ndash;&gt;
                    </div>-->
                </el-tab-pane>

                <el-tab-pane :span="12" label="详细信息" name="second">
                    <body class="hold-transition">
                    <div id="address">
                        <div class="app-container">
                            <div class="box">
                                <div class="filter-container">
                                    <el-input placeholder="请输入公司地址" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                                    <el-button @click="findPage(1)" class="dalfBut">查询</el-button>
                                    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                                </div>

                                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                                    <el-table-column prop="companyAddress" label="公司地址" align="center"></el-table-column>
                                    <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
                                    <el-table-column prop="latitude" label="所在纬度" align="center"></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <div class="pagination-container">
                                    <el-pagination
                                            class="pagiantion"
                                            @current-change="handleCurrentChange"
                                            :current-page="pagination.currentPage"
                                            :page-size="pagination.pageSize"
                                            layout="total, prev, pager, next, jumper"
                                            :total="pagination.total">
                                    </el-pagination>
                                </div>

                                <!-- 新增标签弹层 -->
                                <div class="add-form">
                                    <el-dialog title="新增地址" :visible="dialogFormVisible">
                                        <div id="r-result-1">请输入:<input type="text" id="suggestId" size="20" value="" style="width:150px;" /></div>
                                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                        <div id="l-map-1"></div>

                                        <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取消</el-button>
                                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                                        </div>
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                    </div>
                    </body>
                </el-tab-pane>
        </el-tabs>
    </template>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            addrParam:{ companyAddress:null,
                longitude:null,
                latitude:null},
            activeName: 'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
            dialogFormVisible: false,//控制添加窗口显示/隐藏
        },
        created() {
            //页面初始化，加载分页数据
            this.findPage()
        },
        methods: {
            init(){
                // 百度地图API功能
                function G(id) {
                    return document.getElementById(id);
                }
                var _this = this
                var map1 = new BMap.Map("l-map-1");
                map1.centerAndZoom("成都",12);                   // 初始化地图,设置城市和地图级别。
                map1.enableScrollWheelZoom(true);

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {   "input" : "suggestId",
                        "location" : map1
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    //alert(e)
                    var str = "";
                    var _value = e.fromitem.value;
                    //alert(_value);
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        //alert(_value);
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

                    G("searchResultPanel").innerHTML = str;
                });
                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    //alert(_value);
                    //具体地址
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                    //alert(myValue)
                    // 创建地址解析器实例
                    var myGeo1 = new BMap.Geocoder();
                    //将地址解析结果显示在地图上,并调整地图视野
                    myGeo1.getPoint(myValue, function(point){
                        if (point) {
                            //alert(point.lng+":"+point.lat)
                            _this.addrParam = {
                                companyAddress:myValue,
                                longitude:point.lng,
                                latitude:point.lat
                            }
                            //alert(addrParam+1);
                            map1.centerAndZoom(point, 16);
                            map1.addOverlay(new BMap.Marker(point));

                        }else{
                            alert("您选择地址没有解析到结果!");
                        }
                    }, "北京市");
                    setPlace();
                });
                function setPlace(){
                    map1.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        map1.centerAndZoom(pp, 18);
                        map1.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map1, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }
            },
            handleAdd(){
                var addrParams = this.addrParam;
                //alert(addrParams);
                this.dialogFormVisible=false
                if(addrParams==null){
                    alert("addrParams==null")
                    return false;
                }
                /*发送ajax请求*/
                axios.post("/map/addCompanAddr.do",addrParams).then((req)=>{
                    if(req.data.flag){
                        this.$message.success(req.data.message)
                        this.findPage();
                    }else{
                        this.$message.error(req.data.message)
                    }
                })

            },
            handleDelete(row){
                axios.post("/map/deleteCompantAddr.do?id="+row.id).then((req)=>{
                    if(req.data.flag){
                        this.$message.success(req.data.message)
                        this.findPage();
                    }else{
                        this.$message.error(req.data.message)
                    }
                })
            },
            findPage(currentPage){
                if(currentPage==1){
                    this.pagination.currentPage=currentPage
                }
                var param = {
                    //切换页面获取
                    currentPage: this.pagination.currentPage,
                    //固定值，也可用户根据系统提供值进行自定义
                    pageSize:this.pagination.pageSize,
                    //输入框获取
                    queryString: this.pagination.queryString
                };
                axios.post("/map/pageQuery.do",param).then((req)=>{
                    this.pagination.total=req.data.data.total,
                    this.dataList = req.data.data.rows
                })
            },
            handleCurrentChange(currentPage){
                this.pagination.currentPage=currentPage
                this.findPage()
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 弹出添加窗口
            handleCreate() {
                this.dialogFormVisible=true;
                /*异步加载*/
                //alert("======")
                /*this.$nextTick(()=>{
                    this.init()
                })*/
                // 百度地图API功能
                /*function G(id) {
                    return document.getElementById(id);
                }*/
                //
                this.$nextTick(() => {
                    this.init()
                });
               /* var map1 = new BMap.Map("l-map-1");
                map1.centerAndZoom("成都",12);                   // 初始化地图,设置城市和地图级别。
                map1.enableScrollWheelZoom(true);*/

                /*var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {   "input" : "suggestId",
                        "location" : map1
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    //alert(e)
                    var str = "";
                    var _value = e.fromitem.value;
                    //alert(_value);
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        //alert(_value);
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

                    G("searchResultPanel").innerHTML = str;
                });
                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    //alert(_value);
                    //具体地址
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                    //alert(myValue)
                    // 创建地址解析器实例
                    var myGeo1 = new BMap.Geocoder();
                    //将地址解析结果显示在地图上,并调整地图视野
                    myGeo1.getPoint(myValue, function(point){
                        if (point) {
                            //alert(point.lng+":"+point.lat)
                            _this.addrParam = {
                                companyAddress:myValue,
                                longitude:point.lng,
                                latitude:point.lat
                            }
                            //alert(addrParam+1);
                            map1.centerAndZoom(point, 16);
                            map1.addOverlay(new BMap.Marker(point));

                        }else{
                            alert("您选择地址没有解析到结果!");
                        }
                    }, "北京市");
                    setPlace();
                });
                function setPlace(){
                    map1.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        map1.centerAndZoom(pp, 18);
                        map1.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map1, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }*/
            }
        }
    })
</script>

<script>

    function bdGEO(){
        //地址
        var add = adds[index];
        geocodeSearch(add);
        index++;
    }

    // 百度地图API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(117.269945,31.86713), 13);
    map.enableScrollWheelZoom(true);

    /*ip定位*/
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
    }
    /*地址批量逆解析*/
    var index = 0;
    var myGeo = new BMap.Geocoder()
    var adds=[];
    axios.post("/map/findMap.do").then((req)=>{
        if(req.data.flag){
            adds=req.data.data;
        }else{
            this.$error.message(req.data.message)
        }
    })

    function geocodeSearch(add){
        if(index < adds.length){
            //图标显示时间间隔控制
            setTimeout(window.bdGEO,100);
        }else{
            return false;
        }
        //地址解析方法:拿到中文地址（add），然后解析成经度(point.lng)和纬度（point.lat），
        myGeo.getPoint(add, function(point){
            if (point) {
                //显示的内容
                //document.getElementById("result").innerHTML +=  index + "、" + add + ":" + point.lng + "," + point.lat + "</br>";
                //定位
                var address = new BMap.Point(point.lng, point.lat);
                //addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(20,-10)}));
                addMarker(address,new BMap.Label(add,{offset:new BMap.Size(20,-10)}));
            }
        }, "cityName");
    }
    // 编写自定义函数,创建标注
    function addMarker(point,label){
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }
</script>
</body>
</html>